import { PageContainer } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { Avatar, Button, Skeleton, Modal, Form, Input, message } from 'antd';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import type { FC } from 'react';
import type { CurrentUser } from './data.d';
import useStyles from './style.style';
import { useState } from 'react';
import { modifyPassword } from '@/services/ant-design-pro/dashboard';

dayjs.extend(relativeTime);

const PageHeaderContent: FC<{
  currentUser: Partial<CurrentUser>;
}> = ({ currentUser }) => {
  const { styles } = useStyles();
  const [visible, setVisible] = useState(false);
  const [form] = Form.useForm();

  const loading = currentUser && Object.keys(currentUser).length;
  if (!loading) {
    return (
      <Skeleton
        avatar
        paragraph={{
          rows: 1,
        }}
        active
      />
    );
  }

  const showModal = () => {
    setVisible(true);
  };

  const handleOk = () => {
    form
      .validateFields()
      .then(async (values) => {
       const res = await modifyPassword({ ...values})
       console.log(res)
        // 关闭弹框
        setVisible(false);
        // 显示成功消息
        message.success('密码修改成功');
      })
      .catch((info) => {
        console.log('Validate Failed:', info);
      });
  };

  const handleCancel = () => {
    setVisible(false);
  };

  return (
    <div className={styles.pageHeaderContent}>
      <div className={styles.avatar}>
        <Avatar size="large" src={currentUser.avatar} />
      </div>
      <div className={styles.content}>
        <div className={styles.contentTitle}>
          早安，
          {currentUser.name}
          ，祝你开心每一天！
        </div>
        <div>
          <Button onClick={showModal}>修改密码</Button>
        </div>
      </div>

      <Modal
        title="修改密码"
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form form={form} layout="vertical">
          <Form.Item
            name="oldPassword"
            label="旧密码"
            rules={[
              {
                required: true,
                message: '请输入旧密码',
              },
            ]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            name="newPassword"
            label="新密码"
            rules={[
              {
                required: true,
                message: '请输入新密码',
              },
            ]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            name="confirmPassword"
            label="确认新密码"
            dependencies={['newPassword']}
            rules={[
              {
                required: true,
                message: '请确认新密码',
              },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue('newPassword') === value) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error('两次输入的密码不一致'));
                },
              }),
            ]}
          >
            <Input.Password />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

const Workplace: FC = () => {
  const { initialState } = useModel('@@initialState');
  console.log(initialState);

  return (
    <PageContainer
      content={
        <PageHeaderContent
          currentUser={initialState?.currentUser}
        />
      }
    >
    </PageContainer>
  );
};

export default Workplace;